<template>
  <div class="about">
    <h1>登陆页面</h1>
    <el-form
      :model="ruleForm"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="text">
        <el-input v-model="ruleForm.text"></el-input>
        <div style="width: 60px" v-html="codeOpt.svg"></div>
      </el-form-item>

      <el-form-item>
        <a :href="url">第三方登陆</a>
        <el-button type="primary" @click="submitForm('ruleForm')">
          登陆
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getLoginCode, getLogin, getRegister } from '@/api'
const clineId =
  '14ed43a44a6d4627d1ab8f4c2636a50b6457a9f235124b79150449a3e1a66acd'
const redirect_uri = 'http://localhost:7001/api/oauth/redirect'
export default {
  data() {
    return {
      url: `https://gitee.com/oauth/authorize?client_id=${clineId}&redirect_uri=${redirect_uri}&response_type=code`,
      ruleForm: {
        username: '',
        password: '',
        text: '',
        codeId: '',
      },
      codeOpt: {
        codeId: '',
        svg: '',
      },
    }
  },
  created() {
    this.getCodeText()
  },
  methods: {
    handleAuth() {
      // 拿到用户的clientId
      // 跳转到后台地址
    },
    // 验证码接口
    async getCodeText() {
      // 拿到svg图片进行渲染
      const res = await getLoginCode()
      // console.log('----------------------------------:', res.data)
      this.codeOpt.codeId = res.data.data.insertId
      this.codeOpt.svg = res.data.data.data
    },
    async postLogin(data) {
      const res = await getLogin(data)
      if (res.data.code === 1) {
        localStorage.setItem('token', res.data.data.token)
        localStorage.setItem('userInfo', res.data.data.id)
        console.log('跳转到登陆页面')
        this.$router.push('/layout/home')
      }
    },
    // 登陆接口
    submitForm() {
      this.postLogin({ ...this.ruleForm, codeId: this.codeOpt.codeId })
    },
  },
}
</script>
